<template>
  <div class="windowInfo windowInfo3">
    <img
      src="../../../../public/hide1.png"
      alt
      @click="hideBox"
      style="width: 20px; position: absolute; right: 10px; top: 10px; z-index: 2; cursor: pointer"
    />
    <div class="cars">
      <h3>链路状态显示</h3>
      <a-table size="small" :columns="columns" :data-source="data" :pagination="false" bordered></a-table>
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: '星弹下行链路状态信息',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '通信速率',
    dataIndex: 'rate',
    key: 'rate',
    customRender: function (text) {
      return text + 'kbps'
    },
  },
  {
    title: '信噪比',
    key: 'signalNoise',
    dataIndex: 'signalNoise',
    customRender: function (text) {
      return text + 'dB'
    },
    // scopedSlots: { customRender: 'tags' },
  },
  // {
  //   title: 'Action',
  //   key: 'action',
  //   scopedSlots: { customRender: 'action' },
  // },
]

const data1 = [
  // {
  //   key: '1',
  //   signalNoise: '20',
  //   name: '星指上行链路状态信息',
  //   rate: '256',
  //   tags: ['nice', 'developer'],
  // },
  // {
  //   key: '2',
  //   signalNoise: '10',
  //   name: '星指下行链路状态信息',
  //   rate: '32',
  //   tags: ['loser'],
  // },
  {
    key: '3',
    signalNoise: '25',
    name: '星弹1下行',
    rate: '1024',
  },
  {
    key: '4',
    signalNoise: '15',
    name: '星弹2下行',
    rate: '96',
  },
  {
    key: '5',
    signalNoise: '25',
    name: '星弹3下行',
    rate: '1024',
  },
  {
    key: '6',
    signalNoise: '15',
    name: '星弹4下行',
    rate: '96',
  },
  {
    key: '7',
    signalNoise: '25',
    name: '星弹5下行',
    rate: '1024',
  },
  {
    key: '8',
    signalNoise: '15',
    name: '星弹6下行',
    rate: '96',
  },

  {
    key: '9',
    signalNoise: '25',
    name: '星弹7下行',
    rate: '156',
  },
  {
    key: '10',
    signalNoise: '15',
    name: '星弹8下行',
    rate: '96',
  },
]
const data2 = [
  // {
  //   key: '1',
  //   signalNoise: '20',
  //   name: '星指上行链路状态信息',
  //   rate: '936',
  //   tags: ['nice', 'developer'],
  // },
  // {
  //   key: '2',
  //   signalNoise: '10',
  //   name: '星指下行链路状态信息',
  //   rate: '321',
  //   tags: ['loser'],
  // },
  {
    key: '3',
    signalNoise: '25',
    name: '星弹1下行链路',
    rate: '104',
  },
  {
    key: '4',
    signalNoise: '15',
    name: '星弹2下行链路',
    rate: '916',
  },
  {
    key: '5',
    signalNoise: '25',
    name: '星弹3下行链路',
    rate: '1024',
  },
  {
    key: '6',
    signalNoise: '15',
    name: '星弹4下行链路',
    rate: '936',
  },
  {
    key: '7',
    signalNoise: '25',
    name: '星弹5下行链路',
    rate: '14',
  },
  {
    key: '8',
    signalNoise: '15',
    name: '星弹6下行链路',
    rate: '96',
  },

  {
    key: '9',
    signalNoise: '25',
    name: '星弹7下行链路',
    rate: '1024',
  },
  {
    key: '10',
    signalNoise: '15',
    name: '星弹8下行链路',
    rate: '96',
  },
  {
    key: '11',
    signalNoise: '25',
    name: '星弹9下行链路',
    rate: '1024',
  },
  {
    key: '12',
    signalNoise: '15',
    name: '星弹10下行链路',
    rate: '96',
  },
]
const data3 = [
  // {
  //   key: '1',
  //   signalNoise: '20',
  //   name: '星指上行链路状态信息',
  //   rate: '2150',
  //   tags: ['nice', 'developer'],
  // },
  // {
  //   key: '2',
  //   signalNoise: '10',
  //   name: '星指下行链路状态信息',
  //   rate: '303',
  //   tags: ['loser'],
  // },
  {
    key: '3',
    signalNoise: '25',
    name: '星弹1上行链路',
    rate: '114',
  },
  {
    key: '4',
    signalNoise: '15',
    name: '星弹1下行链路',
    rate: '916',
  },
  {
    key: '5',
    signalNoise: '25',
    name: '星弹2上行链路',
    rate: '1024',
  },
  {
    key: '6',
    signalNoise: '15',
    name: '星弹2下行链路',
    rate: '936',
  },
  {
    key: '7',
    signalNoise: '25',
    name: '星弹3上行链路',
    rate: '14',
  },
  {
    key: '8',
    signalNoise: '15',
    name: '星弹3下行链路',
    rate: '96',
  },

  {
    key: '9',
    signalNoise: '25',
    name: '星弹4上行链路',
    rate: '1024',
  },
  {
    key: '10',
    signalNoise: '15',
    name: '星弹4下行链路',
    rate: '96',
  },
]
import $ from 'jquery'
import { getAction } from '@/api/manage'
export default {
  data() {
    return {
      data: data2,
      data1,
      data2,
      data3,
      columns,
      dataSource: [
        { No: '指控车1', data: data1 },
        { No: '指控车2', data: data2 },
        { No: '指控车3', data: data3 },
      ],
    }
  },
  methods: {
    getList() {
      getAction(this.url.getInteractionStatus).then(res => {
        if (res.success) {
          this.data = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    edit(val) {
      if (val == '指控车1') {
        this.data = JSON.parse(JSON.stringify(this.data1))
      }
      if (val == '指控车2') {
        this.data = JSON.parse(JSON.stringify(this.data2))
      }
      if (val == '指控车3') {
        this.data = JSON.parse(JSON.stringify(this.data3))
      }
    },
    hideBox() {
      $('.cars').fadeToggle(1000)
    },
  },
}
</script>
<style>
.windowInfo3 .ant-table {
  line-height: 0.5;
}
.windowInfo .ant-table-thead > tr > th,
.windowInfo .ant-table-tbody > tr > td {
  color: #fff;
  background: rgba(30, 36, 50, 0) !important;
}
.windowInfo .ant-pagination-item a,
.windowInfo .ant-pagination-item-active a,
.windowInfo .ant-pagination-disabled a,
.windowInfo .ant-pagination-disabled:hover a,
.windowInfo .ant-pagination-disabled:focus a,
.windowInfo .ant-pagination-disabled .ant-pagination-item-link,
.windowInfo .ant-pagination-disabled:hover .ant-pagination-item-link,
.windowInfo .ant-pagination-disabled:focus .ant-pagination-item-link {
  background: rgba(30, 36, 50, 0) !important;
}
</style>
<style lang="less" scoped>
.windowInfo {
  position: relative;
  min-width: 40px;
  min-height: 40px;
  h3 {
    color: #fff;
  }
  color: #fff;
  padding: 10px;
  background: rgba(30, 36, 50, 0.6) !important;
}
.ant-table-thead {
  background: rgba(30, 36, 50, 0) !important;
}
.windowInfo .cars .ant-table {
  .windowInfo .ant-table-thead > tr > th {
    color: #fff;
    background: rgba(30, 36, 50, 0) !important;
  }
  .windowInfo .ant-table-thead > td {
    color: #fff;
  }
}
.windowInfo .ant-table-wrapper {
  color: #fff;
  background: rgba(30, 36, 50, 0) !important;
}
.windowInfo .cars,
.windowInfo .cars .ant-card-head,
.windowInfo .cars .ant-card-body {
  background: rgba(30, 36, 50, 0) !important;
}

/* 四角边框--start */
.windowInfo {
  position: relative;
  // width: 300px;
  // /* height: 300px; */
  // margin: 300px auto;
  // /* background: rgba(1, 19, 67, 0.8); */

  border: 2px solid #58d0f3 !important;
  z-index: 1;
}

.windowInfo::before {
  position: absolute;
  content: '';
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  /* border-top: 2px solid #016886; */
  /* border-bottom: 2px solid #016886; */
  border-bottom: 2px solid #4f78ae;
  border-top: 2px solid #4f78ae;
  z-index: -1;
}
.windowInfo::after {
  position: absolute;
  content: '';
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  border-right: 2px solid #4f78ae;
  border-left: 2px solid #4f78ae;
  z-index: -1;
}

/* 四角边框--end */
</style>
